---
title: Monitorea tu sitio Astro con Sentry
description: Cómo monitorear tu sitio Astro con Sentry
sidebar:
  label: Sentry
type: backend
logo: sentry
stub: false
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Sentry](https://sentry.io) ofrece un servicio completo de monitoreo de aplicaciones y seguimiento de errores diseñado para ayudar a los desarrolladores a identificar, diagnosticar y resolver problemas en tiempo real.

Lee más en nuestro blog sobre [la asociación de Astro con Sentry](https://astro.build/blog/sentry-official-monitoring-partner/) y la aplicación de barra de herramientas de desarrollo Spotlight de Sentry que trae una superposición de depuración rica a tu entorno de desarrollo de Astro. Spotlight muestra errores, trazas y contexto importante directamente en tu navegador durante el desarrollo local.

El SDK de Astro de Sentry permite la generación automática de informes de errores y datos de seguimiento en tu aplicación Astro.

## Configuración del proyecto

Una lista completa de requisitos previos se puede encontrar en [la guía de Sentry para Astro](https://docs.sentry.io/platforms/javascript/guides/astro/#prerequisites).

## Instalar

Sentry captura datos utilizando un SDK dentro del tiempo de ejecución de tu aplicación.

Instala el SDK ejecutando el siguiente comando para el gestor de paquetes de tu elección en la CLI de Astro:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add @sentry/astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add @sentry/astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add @sentry/astro
  ```
  </Fragment>
</PackageManagerTabs>

La CLI de astro instala el paquete SDK y agrega la integración de Sentry a tu archivo `astro.config.mjs`.

## Configurar

Para configurar la integración de Sentry, debes proporcionar las siguientes credenciales en tu archivo `astro.config.mjs`.

1. **Llave de cliente (DSN)** - Puedes encontrar el DSN en la configuración de tu proyecto de Sentry en *Client keys (DSN)*.
2. **Nombre de proyecto*** - Puedes encontrar el nombre del proyecto en la configuración de tu proyecto de Sentry en *General settings*.
3. **Token de autenticación** - Puedes crear un token de autenticación en la configuración de tu organización de Sentry en *Auth tokens*.

:::note
Si estás creando un nuevo proyecto de Sentry, selecciona Astro como tu plataforma para obtener toda la información necesaria para configurar el SDK.
:::

```js title="astro.config.mjs" ins={2, 6-12}
import { defineConfig } from 'astro/config';
import sentry from '@sentry/astro';

export default defineConfig({
  integrations: [
    sentry({
      dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
      sourceMapsUploadOptions: {
        project: 'proyecto-ejemplo',
        authToken: process.env.SENTRY_AUTH_TOKEN,
      },
    }),
  ],
});
```
Cuando hayas configurado tus `sourceMapsUploadOptions` y añadido tu `dsn`, el SDK capturará y enviará automáticamente errores y eventos de rendimiento a Sentry.

## Prueba tu configuración

Agrega el siguiente elemento `<button>` a una de tus páginas `.astro`. Esto te permitirá desencadenar manualmente un error para que puedas probar el proceso de informe de errores.

```astro title="src/pages/index.astro"
<button onclick="throw new Error('Esto es un error de prueba')">Tira el error de prueba</button>
```

Para ver y resolver el error registrado, inicia sesión en [sentry.io](https://sentry.io/) y abre tu proyecto.
